<template>
  <div class="role">
      <div class="content">
          <!-- 面包屑 -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色列表</el-breadcrumb-item>
            </el-breadcrumb>
            <el-button class="add">添加角色</el-button>
            <!-- 表格 -->
            <template>
                <el-table :data="tableData" style="width: 100%">
                    <!-- 下拉下拉 -->
                    <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-row :gutter="10" v-for="(item,i) in props.row.children" :key="i">
                        <el-col :span="4">
                            <el-tag closable>{{item.authName}}</el-tag>
                            <i class="el-icon-arrow-right"></i>
                        </el-col>
                        <el-col :span="20">
                            <el-row :gutter="10" v-for="(item1,i1) in item.children" :key="i1">
                            <el-col :span="4">
                                <el-tag closable type="success">{{item1.authName}}</el-tag>
                                <i class="el-icon-arrow-right"></i>
                            </el-col>
                            <el-col :span="20" class="elCol20">
                                <el-row :gutter="10" v-for="(item2,i2) in item1.children" :key="i2">
                                <el-col :span="24">
                                    <el-tag closable type="warning">{{item2.authName}}</el-tag>
                                </el-col>
                                </el-row>
                            </el-col>
                            </el-row>
                        </el-col>
                        </el-row>
                    </template>
                    </el-table-column>
                    <!-- 222 -->
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column property="roleName" label="角色名称" width="220"></el-table-column>
                    <el-table-column property="roleDesc" label="角色描述" width="220"></el-table-column>
                    <el-table-column property="operat" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.$index, scope.row)" size="mini"></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index, scope.row)" size="mini" ></el-button>
                            <el-button type="success" icon="el-icon-check" circle @click="handleEdit1(scope.$index, scope.row,scope.row.roleName,scope.row.roleDesc)" size="mini"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
        </template> 
        <!-- 下拉表格 -->
        <template>
        <el-dialog title="分配权限" :visible.sync="outerVisible">
            <el-dialog width="30%" title="分配权限" :visible.sync="innerVisible" append-to-body></el-dialog>
            <el-tree
            :data="option"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            ></el-tree>
            <div slot="footer" class="dialog-footer">
            <el-button @click="outerVisible = false">取 消</el-button>
            <el-button type="primary" @click="outerVisible2">确 定</el-button>
            </div>
        </el-dialog>
    </template>
      </div>
</div>
</template>

<script>
import {
  rolelist,
  left,
  jurisdictionlist,
  rolelist2,
  zation,
  delrole,
  redact
} from "../api/api.js";
export default {
  name: "roles",
  data() {
    return {
      option: [],
      tableData: [],
      tags: [{ name: "", type: "" }],
      outerVisible: false,
      innerVisible: false,
      formadd: {
        name: "",
        region: ""
      },
      defaultProps: {
        children: "children",
        label: "authName"
      },
      roleName: "",
      roleDesc: "",
      roleId: "",
      rids: ""
    };
  },
  methods: {
    // 编辑角色的方法：
    handleEdit(index, row){
      console.log(row.roleName);
      redact({
        id:row.id,
        roleName:row.roleName
      }).then(res=>{
        if(res.status==200){
          console.log("编辑成功",res);
        }
      })
    },
    handleEdit1(index, row, name, rect) {
      this.rolelist().then(res => {
        console.log(111111, row);
        // console.log("1111")
        this.outerVisible = true;
        this.roleName = name;
        this.roleDesc = rect;
        this.$nextTick(() => {
          this.$refs.tree.setCheckedNodes(row.children);
        });
      });
    },
    // 删除角色的接口
    handleDelete(index, row) {
      console.log(index, row.id);
      // 删除角色
      delrole({
        id:row.id
      }).then(res=>{
        console.log("删除角色",res);
        return res;
      }).then(res=>{
        if(res){
          this.rolelist();
        }
      })
    },
    rolelist() {
      return rolelist().then(res => {
        if (res.status == 200) {
          console.log("分配列表", res);
          return (this.tableData = res.data.data);
        }
      });
    },
    jurisdictionlist() {
      jurisdictionlist({
        type: "tree"
      }).then(res => {
        if (res.status == 200) {
          console.log("分配权限", res);
          this.option = res.data.data;
        }
      });
    },
    outerVisible2() {
      var chkIds1 = this.$refs.tree
        .getCheckedKeys()
        .concat(this.$refs.tree.getHalfCheckedKeys());
      this.rids = chkIds1.join(",");
      console.log("000", this.rids);
      this.outerVisible = false;
      rolelist2({
        roleName: this.roleName,
        roleDesc: this.roleDesc
      })
        .then(res => {
          if (res.status == 200) {
            console.log("分类列表的更新啊", res);
            this.roleId = res.data.data.roleId;
            console.log(this.roleId);
          }
        })
        .then(res => {
          this.Authorization();
        });
    },
    // 角色授权接口
    Authorization() {
      zation({
        roleId: this.roleId,
        rids: this.rids
      }).then(res => {
        if (res.status == 200) {
          console.log("更新成功", res);
        }
        return res;
      }).then(res=>{
        if(res){
          this.rolelist();
        }
      });
    },
  },
  created() {
    this.rolelist();
    this.jurisdictionlist();
  },
  setCheckedKeys() {
    this.$refs.tree.setCheckedKeys([3]);
  },
  resetChecked() {
    this.$refs.tree.setCheckedKeys([]);
  }
};
</script>

<style scoped lang="scss">
 .role{
        width:85%;
        height:93%;
        background-color:white;
        margin:22px auto;
        display:flex;
        justify-content: center;
        align-items:center;
        .content{
            width:97%;
            height:95%;
            .add{
               margin-top:10px; 
            }
            .demo-table-expand {
                font-size: 0;
            }
            .demo-table-expand label {
                width: 90px;
                color: #99a9bf;
            }
            .demo-table-expand .el-form-item {
                margin-right: 0;
                margin-bottom: 0;
                width: 50%;
            }
            .el-tag , .el-tag {
                margin-left: 10px;
            }
            .button-new-tag {
                margin-left: 10px;
                height: 32px;
                line-height: 30px;
                padding-top: 0;
                padding-bottom: 0;
            }
            .input-new-tag {
                width: 90px;
                margin-left: 10px;
                vertical-align: bottom;
            }
        }          
    }
.elCol20 {
  display: flex;
  flex-wrap: wrap;
}
.el-tag[data-v-633ed8d8] {
  margin: 0px;
}
</style>
